<template>
    <div>
        <TitleBar class="absolute top-0 left-0 w-[450px]">监控视频</TitleBar>
        <div class="page-scroll absolute top-[40px] left-0 right-0 bottom-0" v-lazy-root>
            <div class="video-page" v-for="(_, idx) in Math.ceil(allVideo.length / pageSize)"
                 v-appear="() => onAppear(idx)" v-disappear="() => onDisappear(idx)">
                <Player v-for="video in allVideo.slice(idx * pageSize, idx + pageSize)" ref="allVideoRef"
                          :src="video" muted :title="video.devicePlace ?? '无标题'" @click.native="emit('select', video)"></Player>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import './vLazy'
import TitleBar from '../components/TitleBar.vue'
import { inject, ref, ComputedRef } from 'vue';
import { useVideoLoader, VideoSource } from './api';
import Player from './Player.vue';
const villageId = inject<ComputedRef<string>>('villageId')!

const emit = defineEmits<{
    (event: 'select', value: VideoSource): void
}>()
const loader = useVideoLoader(villageId.value)

const pageSize = 4
const allVideo = ref<VideoSource[]>([])
const allVideoRef = ref<InstanceType<typeof Player>[]>([])

loader.load().then(value => allVideo.value = value)

function onAppear(pageIdx: number) {
    console.log('onAppear', pageIdx)
    allVideoRef.value.slice(pageIdx * pageSize, pageIdx + pageSize).forEach(v => v.play())
}

function onDisappear(pageIdx: number) {
    console.log('onDisappear', pageIdx)
    allVideoRef.value.slice(pageIdx * pageSize, pageIdx + pageSize).forEach(v => v.stop())
}

</script>

<style scoped>
.page-scroll {
    overflow: scroll;
    scroll-snap-type: y mandatory;
}
.page-scroll::-webkit-scrollbar-thumb {
    background-color: #fff2;
}

.page-scroll>div {
    scroll-snap-stop: always;
    scroll-snap-align: center;
    height: 100%;
    width: 100%;
}

.video-page {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
}

.video-page>.hls-video {
    width: 400px;
    height: 198px;
    transition: box-shadow 250ms;
}

.hls-video:hover {
    box-shadow: 0 0 3px 1px #59ABFF;
    transition-duration: 0ms;
}
</style>